<template>
    <p>{{ msg }}</p>
    <!-- 将msg的数组中根据空格进行翻转,Hello Vue -- Vue Hello -->
    <p>{{ msg.split(' ').reverse().join(' ').toUpperCase() }}</p>
    <p>{{ reverse }}</p>
    <p>{{ num }}</p>
    <p>{{ doubleNum }}</p>
    <button @click="doubleNum = 10">修改doubleNum的值</button>
</template>
<script setup>
import { computed, ref } from 'vue';
const msg = ref('Hello Vue')
const num = ref(10)

// 通过计算属性实现翻转功能
const reverse = computed(() => {
    return msg.value.split(' ').reverse().join(' ').toUpperCase();
})

const doubleNum = computed({
    get: () => {
        return num.value * 2;
    },
    set(value) {
        num.value = value / 2;
    }
})

</script>